<template>
    <div>
        <el-card class="box-card">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="0">当天</el-menu-item>
                <el-menu-item index="7">7天</el-menu-item>
                <el-menu-item index="30">30天</el-menu-item> </el-menu
            ><br />
            <el-card class="box-card2">
                <div class="text item">
                    <h1>0</h1>
                    <br />
                    <span>总运单数</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>7</h1>
                    <br />
                    <span>总设备数</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>12</h1>
                    <br />
                    <span>在途运单</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>0</h1>
                    <br />
                    <span>报警运单</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
        </el-card>
    </div>
</template>

<script>
// import { pandect } from '../../api/api';
export default {
    data() {
        return {
            activeIndex: '0'
        };
    },
    methods: {
        // handleSelect(key, keyPath) {
        //     this.activeIndex = key;
        //     pandect({ params: { activeindex: this.activeIndex } }).then(res => {
        //         console.log(res);
        //     });
        // }
    },

    mounted: function() {
        // // 获取总览信息
        // pandect({ params: { activeindex: this.activeIndex } }).then(res => {
        //     console.log(res);
        // });
    }
};
</script>

<style>
.text {
    font-size: 14px;
    text-align: center;
    margin: auto;
}

.item {
    padding: 18px 0;
    width: 25%;
}

.box-card {
    width: 100%;
}
.box-card1 {
    width: 25%;
    height: 250px;
    float: left;
}
.box-card2 {
    width: 24%;
    height: 250px;
    float: left;
}
</style>